<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div1{
        padding:10px;
        border:3px solid #000;
    }
    .div2{
        float:left;
    padding:10px;
    border:3px solid red;
    }
    .rule1{
        float:left;
        margin:10px;
        padding:10px;
        background-color: #eee;
        width:100px;
        text-align: center;
    }
    .box{
        background-color: #d32d2d;
        padding:10px;
        width:500px;
        height:400px;
    }
</style>
<body>
    <div class="div1">
        <img src="love.jpg" width="400px">
    </div>
    <div class="box">
        <!-- 行内元素 不能设置宽高 内容撑起来 -->
    <span class="rule1">首页</span>
    <span class="rule1">发现</span>
    <span class="rule1">动态</span>
    <span class="rule1">我的</span>
</div>
    <!-- float flex grid table-cell inline-block 创建新的格式 -->
    <!--<div class="div2">
        <img src="https://ecmb.bdimg.com/kmarketingadslogo/-965316802_-1524570069_259_194.png
        ">
    </div>-->
</body>
</html>